<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    .list-box {
      padding-top: 1px;
      position: relative;
      width: 1200px;
      margin: 0 auto;
      min-height: 795px;
      background: orange;
    }

    .center {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    .list-box h2 {
      margin: 35px auto auto;
      width: 295px;
      height: 45px;
    }

    .list-box .links {
      width: 710px;
      margin: 120px auto auto;
    }

    .list-box .links a {
      margin-right: 105px;
      float: left;
      width: 58px;
      font-size: 12px;
      line-height: 12px;
      color: #000000;
    }

    .list-box .links a:hover {
      color: #fff;
      text-decoration: underline;
    }

    .list-box .links a:last-child {
      margin-right: 0;
    }

    .list-con {
      margin-top: 186px;
      height: 610px;
      background: pink;
    }

    .list-l {
      float: left;
      width: 990px;
      height: 100%;
      background: yellow;
    }

    .list-r {
      border-left: 1px solid #000;
      float: right;
      width: 205px;
      height: 100%;
      background: green;
    }

    .show {
      float: left;
      width: 420px;
      height: 420px;
      background: lightcoral;
    }

    .show-img {
      margin-left: 66px;
      display: block;
      width: 300px;
      height: 420px;
    }

    .detail-box {
      margin: 0 20px;
      float: left;
      width: 508px;
      height: 606px;
      background: green;
    }

    .shop-box {
      font-size: 16px;
    }

    .price-box {
      margin-top: 15px;
      background: #f0efef;
      font-size: 20px;
      color: #ff0036;
      height: 40px;
      line-height: 40px;
    }

    .price-box span:nth-child(1) {
      margin: 0 46px 0 7px;
      font-size: 12px;
      color: #baa3ad;
    }

    .carriage-box {
      height: 46px;
      line-height: 46px;
      font-size: 12px;
      color: #333333;
    }

    .carriage-box span:nth-child(1) {
      margin: 0 37px 0 10px;
      color: #999999;
    }

    .appraise-box {
      height: 36px;
      line-height: 38px;
      border-top: 1px dashed #ccc;
      border-bottom: 1px dashed #ccc;
      text-align: center;
      font-size: 12px;
      color: #999999;
      clear: both;
    }

    .appraise-l,
    .appraise-r {
      width: 250px;
      height: 16px;
    }

    .appraise-l {
      float: left;
    }

    .shuxian {
      margin-top: 11px;
      float: left;
      width: 1px;
      height: 16px;
      background: #ccc;
    }

    .appraise-r {
      float: right;
      width: 255px;
    }

    .appraise-box .appraise {
      color: #ff0036;
      margin-left: 5px;
    }

    .appraise-box .jifen {
      color: #228800;
      margin-left: 5px;
    }

    /* 商品简介 */
    .shop-brief {
      padding-top: 1px;
      padding-left: 10px;
      height: 446px;
      width: 498px;
      background: pink;
    }

    .shop-size {
      margin: 16px 0 12px 0;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #838383;
    }

    .shop-size span:nth-child(1) {
      margin-left: 44px;
    }

    .shop-size span {
      margin-right: 6px;
      display: inline-block;
      width: 32px;
      height: 28px;
      line-height: 30px;
      border: 1px solid #b8b7bd;
      text-align: center;
      color: #333;
    }

    .shop-color {
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      color: #838383;
    }

    .shop-color img {
      margin-left: 20px;
      display: inline-block;
      height: 38px;
      width: 38px;
      border: 1px solid #b8b7bd;
      vertical-align: middle;
    }

    .shop-num {
      margin: 12px 0 23px 0;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #878787;
      clear: both;
    }

    .shop-num span {
      float: left;
    }

    .shop-num input {
      float: left;
      margin: 0 3px 0 43px;
      width: 41px;
      height: 29px;
      border: 1px solid #a7a6ac;
    }

    .shop-num .sanjiao {
      float: left;
      width: 29px;
      height: 16px;
    }

    .shop-num .sanjiao .add,
    .shop-num .sanjiao .sub {
      height: 12px;
      width: 16px;
      border: 1px solid #a7a6ac;
    }

    .shop-num .sanjiao .add {
      margin-bottom: 3px;
    }

    .shop-car {
      height: 40px;
      clear: both;
    }

    .shop-car .pay-btn,
    .shop-car .pay-car {
      float: left;
      width: 178px;
      height: 38px;
      line-height: 40px;
      border: 1px solid #ff0036;
      text-align: center;
    }

    .shop-car .pay-btn {
      margin: 0 10px 0 74px;
      color: #ff0036;
    }

    .shop-car .pay-car {
      color: #fff;
      background: #ff0036;
    }
  </style>
</head>

<body>
  <div class="output">
    <!-- <div class="list-box">
      <h2 class="center"><img src="../images/detailPage-title_03.jpg" alt=""></h2>
      <div class="links center">
        <a href="###">首页</a><a href="###">所有宝贝</a><a href="###">周二上新</a>
        <a href="###">时髦型录</a> <a href="###">会员中心</a>
      </div>
      <div class="list-con">
        <div class="list-l">
          <div class="show">
            <img class="show-img" src="../images/001_03.jpg" alt="">
          </div> -->
    <!-- 详情区域 -->
    <!-- <div class="detail-box">
            <h3 class="shop-box">
              预售-音儿女装2020夏季新款时尚小周菊图案印花....
            </h3>
            <div class="price-box">
              <span>价格</span>￥<span class="price">2490.9</span>
            </div>
            <div class="carriage-box">
              <span>运费</span><span>杭州</span>
            </div> -->
    <!-- 评价 -->
    <!-- <div class="appraise-box">
              <div class="appraise-l">
                累计评价<span class="appraise">17</span>
              </div>
              <span class="shuxian"></span>
              <div class="appraise-r">
                送天猫积分<span class="jifen">1240</span>
              </div>
            </div> -->
    <!-- 尺寸，颜色区域 数量  商品简介 -->
    <!-- <div class="shop-brief">
              <div class="shop-size">
                尺码
                <span>36</span>
                <span>38</span>
                <span>40</span>
                <span>42</span>
                <span>44</span>
                <span>46</span>
              </div>
              <div class="shop-color">
                颜色分类
                <img src="../images/004_03.jpg" alt="">
              </div>
              <div class="shop-num">
                <span>数量</span> <input type="text" name="" id="" value="1">
                <div class="sanjiao">
                  <div class="add"></div>
                  <div class="sub"></div>
                </div>
                <span>件</span>
              </div> -->
    <!-- 购买按钮  购物车-->
    <!-- <div class="shop-car">
                <div class="pay-btn">立即购买</div>
                <div class="pay-car">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
        <div class=" list-r"></div>
      </div>
    </div> -->

  </div>


  <script>
    var data = [{
      id: 1,
      imgUrl: '../images/001_03.jpg',
      price: 166.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白",
      shop: "江米团猫",
      pay: "477",
      gold: "../images/gold1_03.jpg",
      grand: "4.8"
    }, {
      id: 2,
      imgUrl: '../images/002_03.jpg',
      price: 1996.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "555",
      gold: "../images/gold1_03.jpg",
      grand: "4.9"
    }, {
      id: 3,
      imgUrl: '../images/003.jpg',
      price: 1996.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "555",
      gold: "../images/gold1_03.jpg",
      grand: "4.9"
    }, {
      id: 4,
      imgUrl: '../images/004_03.jpg',
      price: 1996.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "555",
      gold: "../images/gold1_03.jpg",
      grand: "4.9"
    }, {
      id: 5,
      imgUrl: '../images/005_03.jpg',
      price: 296.00,
      package: "包邮",
      title: "SP同款春夏短袖蕾丝性感露肩连衣裙小白2",
      shop: "江米团猫",
      pay: "535",
      gold: "../images/gold1_03.jpg",
      grand: "4.7"
    }]

    let output = document.querySelector(".output")
    let list_box = document.querySelector(".list-box")
    //拿到列表页传递过来的参数 //?id=4
    let arr = location.search.substr(1).split("="); //["id", "4"]
    // console.log(res[0], res[1]);
    let obj = {}
    obj[arr[0]] = arr[1] //{id: "4"}

    //拿到列表页的id来查询这边的id，然后返回数据，渲染数据
    let res = data.filter(function (item, i) {
      return obj['id'] == item.id
    })
    // console.log(res);

    output.innerHTML = ""
    render(res)



    function render(data) {
      data.forEach(function (item, i) {
        output.innerHTML += `
    <div class="list-box" id="${obj['id']}">
      <h2 class="center"><img src="../images/detailPage-title_03.jpg" alt=""></h2>
      <div class="links center">
        <a href="###">首页</a><a href="###">所有宝贝</a><a href="###">周二上新</a>
        <a href="###">时髦型录</a> <a href="###">会员中心</a>
      </div>
      <div class="list-con">
        <div class="list-l">
          <div class="show">
            <img class="show-img" src="${item.imgUrl}" alt="">
          </div>
          <!-- 详情区域 -->
          <div class="detail-box">
            <h3 class="shop-box">
              ${item.title}
            </h3>
            <div class="price-box">
              <span>价格</span>￥<span class="price">${item.price}</span>
            </div>
            <div class="carriage-box">
              <span>运费</span><span>杭州</span>
            </div>
            <!-- 评价 -->
            <div class="appraise-box">
              <div class="appraise-l">
                累计评价<span class="appraise">17</span>
              </div>
              <span class="shuxian"></span>
              <div class="appraise-r">
                送天猫积分<span class="jifen">1240</span>
              </div>
            </div>
            <!-- 尺寸，颜色区域 数量  商品简介 -->
            <div class="shop-brief">
              <div class="shop-size">
                尺码
                <span>36</span>
                <span>38</span>
                <span>40</span>
                <span>42</span>
                <span>44</span>
                <span>46</span>
              </div>
              <div class="shop-color">
                颜色分类
                <img src="../images/004_03.jpg" alt="">
              </div>
              <div class="shop-num">
                <span>数量</span> <input type="text" name="" id="" value="1">
                <div class="sanjiao">
                  <div class="add"></div>
                  <div class="sub"></div>
                </div>
                <span>件</span>
              </div>
              <!-- 购买按钮  购物车-->
              <div class="shop-car">
                <div class="pay-btn">立即购买</div>
                <div class="pay-car">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
        <div class=" list-r"></div>
      </div>
    </div>

      `
      })
    }
  </script>
</body>

</html>